<template>
	<view class="content">
		<map id="myMap" @markertap="onMarkerTap" @tap="handleMapTap" @regionchange="onRegionChange" :style="{width: '100%', height: '100vh'}"
			:latitude="latitude" :longitude="longitude" :markers="markers">
		</map>

		<!-- 自定义气泡（使用 cover-view） -->
		<cover-view v-if="showCallout" class="custom-callout" :style="calloutPosition">

			<cover-view class="callout-content">
				<cover-view class="title" catchtap>
					<cover-image src="/static/home/shopIcon.png" class="callout-Shop" catchtap />
					{{currentMarker.title}}
				</cover-view>
				<cover-view class="descCont" catchtap>
					<cover-view class="desc" catchtap>{{currentMarker.address || '暂无地址信息'}}</cover-view>
					<cover-view class="dh-btn" @tap="navigateToShop" catchtap>
						<cover-image src="/static/home/daohang.png" class="callout-Dh" catchtap />
						导航
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

		<!-- 智能优化筛选框 -->
		<view class="shopMsgBox"  >
			<view class="shopMsgBoxLeft">
				今日推荐门店
				<view class="shopMsgNum">
					{{ shopList.length }}家
				</view>
			</view>
			<view class="shopMsgBoxRight" @click="toggleTypeSelector">
				{{ typeOptions.find(opt => opt.value === searchType)?.label || '智能推荐' }}
				<view class="shopMsgBoxBotom">
					<u-icon name="arrow-down" color="#5E606F" size="10"></u-icon>
				</view>
		</view>
		<!-- 搜索类型选择弹窗 -->
		<view v-if="showTypeSelector" class="typeSelector">
			<view 
				v-for="option in typeOptions" 
				:key="option.value"
				class="typeOption"
				@click="selectType(option.value)"
			>
				{{ option.label }}
				<u-icon 
					v-if="searchType === option.value" 
					name="<" 
					color="#00bd86" 
					size="10"
				></u-icon>
			</view>
		</view>

		<!-- 地图按钮 -->
		<view class="mapBtnClick">
			<view class="mapBtnClickLi">
				<image src="/static/home/mywz.png" mode="" @click="locateToMyPosition"></image>
			</view>
		</view>

			<view class="footerImageList" @click="navigateToMyLocation">
				<image src="/static/home/mywz.png" mode=""></image>
			</view> 

			<!-- 底部门店列表 -->
		<view class="footerShopList">
		
			<view class="footerTitList" style="margin-left: -20rpx;" >
				<view class="footerTitListTop">
					今日，该方案共推荐<text>{{ shopList.length }}</text>家门店
				</view>
				<scroll-view scroll-y="true" class="shopListScroll">
					<view v-if="shopList.length > 0">
						<view class="listLi" v-for="(item,index) in shopList" :key="index" @click="onShopListItemClick(item)">
							<view class="listTag" v-if="item.tag === '优质' || item.isHighQuality">
								优质
							</view>
							<view class="listName">
								{{ item.name || '门店名称' }}
							</view>
							<view class="listAddress">
								<image src="/static/home/didian.png" mode=""></image>
								{{ formatDistance(item.distance) }}
								<view class="listAddressName">
									{{ item.address || '暂无地址信息' }}
								</view>
							</view>
							<!-- <view class="listNumBox">
								<view class="listNumLi">
									<view class="listNum">
										￥<text>{{ formatSales(item.monthSales || 0) }}</text>
									</view>
									<view class="listNumText">
										本月销售
									</view>
								</view>
								<view class="listNumLi">
									<view class="listNum">
										￥<text>{{ formatSales(item.halfYearSales || 0) }}</text>
									</view>
									<view class="listNumText">
										近6个月销售
									</view>
								</view>
							</view> -->
						</view>
					</view>
					<view v-else class="no-shop-data">
						暂无门店数据
					</view>

					<view style="height: 50rpx;"></view>
				</scroll-view>
			</view>
			</view>
	
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, onUnmounted } from 'vue';
	import { GETBandShop } from '@/api/interface.js';

	// 响应式数据
	const latitude = ref('39.909');
	const longitude = ref('116.39742');
	const markers = ref([]);
	const shopList = ref([]); // 存储门店列表数据
	// 底部列表展开/收起
	// 底部列表固定高度（与样式 .footerShopList 保持一致）
const footerHeightRpx = 460;

	// 搜索类型相关
	const searchType = ref('0'); // 默认智能推荐
	const showTypeSelector = ref(false);
	const typeOptions = [
		{ label: '智能推荐', value: '0' },
		{ label: '距离优先', value: '1' },
		{ label: '销量优先', value: '2' },
		{ label: '优质门店', value: '3' },
		{ label: '未跑动', value: '4' }
	];

	// 气泡控制
	const showCallout = ref(false);
	const currentMarker = ref({});
	const hideTimeout = ref(null);
	const markerJustClicked = ref(false);
	let locationUpdateStarted = false;
	// 地图移动定时器
	const mapMoveInterval = ref(null);

	// 获取门店数据
	const fetchShopData = () => {
		// 获取当前位置
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				
				// 调用接口获取门店数据
				GETBandShop({
					longitude: res.longitude.toString(),
					latitude: res.latitude.toString(),
					searchType: searchType.value
				}).then(res => {
					console.log('门店数据:', res.data);
					// 处理返回的门店数据，更新地图标记
					if (res.data && res.data.length > 0) {
						shopList.value = res.data;
						// 更新地图标记
						updateMapMarkers(res.data);
					}
				}).catch(err => {
					console.error('获取门店数据失败:', err);
				});
			},
			fail: (err) => {
				console.error('获取位置失败:', err);
				// 使用默认位置调用接口
				GETBandShop({
					longitude: longitude.value.toString(),
					latitude: latitude.value.toString(),
					searchType: searchType.value
				}).then(res => {
					console.log('使用默认位置获取门店数据:', res.data);
					if (res.data && res.data.length > 0) {
						shopList.value = res.data;
						updateMapMarkers(res.data);
					}
				});
			}
		});
	};

	// 更新地图标记
	const updateMapMarkers = (data) => {
		markers.value = data.map((shop, index) => ({
			id: shop.id || index + 1,
			latitude: parseFloat(shop.latitude),
			longitude: parseFloat(shop.longitude),
			title: shop.name || '门店',
			address: shop.address || '', // 存储地址信息
			iconPath: '/static/home/zuobiao.png',
			callout: {
				content: shop.name || '门店信息',
				color: '#ffffff',
				bgColor: '#4a6491',
				padding: 10,
				borderRadius: 5,
				display: 'ALWAYS'
			},
			customCallout: {
				anchorY: 0,
				display: 'ALWAYS'
			}
		}));
		
		// 默认显示第一个点的气泡并移动地图到第一个点
		if (markers.value.length > 0) {
			currentMarker.value = markers.value[0];
			showCallout.value = true;
			// 移动地图中心点到第一个标记点
			latitude.value = markers.value[0].latitude;
			longitude.value = markers.value[0].longitude;
			// 延迟更新气泡位置，确保地图渲染完成
			setTimeout(() => {
				updateCalloutPosition(currentMarker.value);
			}, 300);
		}
	};

	// 切换搜索类型
	const toggleTypeSelector = () => {
		showTypeSelector.value = !showTypeSelector.value;
	};

	// 选择搜索类型
	const selectType = (type) => {
		searchType.value = type;
		showTypeSelector.value = false;
		fetchShopData(); // 重新获取数据
	};

	// 点击 marker
	const onMarkerTap = (e) => {
		const markerId = e.detail.markerId;
		const marker = markers.value.find(m => m.id === markerId);
		if (marker) {
			// 设置标记点点击标志，防止地图点击事件隐藏气泡
			markerJustClicked.value = true;
			// 清除任何可能的隐藏超时
			if (hideTimeout.value) {
				clearTimeout(hideTimeout.value);
			}
			// 直接设置为显示状态
			currentMarker.value = marker;
			showCallout.value = true;
			// 更新气泡位置
			updateCalloutPosition(marker);
			
			// 500ms后重置标记点点击标志
			setTimeout(() => {
				markerJustClicked.value = false;
			}, 500);
		}
	};

	// 隐藏气泡
	const hideCallout = () => {
		// 延迟隐藏，避免与标记点点击事件冲突
		if (hideTimeout.value) {
			clearTimeout(hideTimeout.value);
		}
		hideTimeout.value = setTimeout(() => {
			showCallout.value = false;
		}, 100);
	};

	// 处理地图点击事件
	const handleMapTap = (e) => {
		// 如果最近点击了标记点，则不隐藏气泡
		if (markerJustClicked.value) {
			return;
		}
		// 清除任何可能的隐藏超时
		if (hideTimeout.value) {
			clearTimeout(hideTimeout.value);
		}
		hideTimeout.value = setTimeout(() => {
			// 只有当气泡显示且最近没有点击标记点时才隐藏
			if (showCallout.value && !markerJustClicked.value) {
				showCallout.value = false;
			}
		}, 200);
	};

	// 导航到门店
	const navigateToShop = () => {
		if (currentMarker.value) {
			uni.openLocation({
				latitude: currentMarker.value.latitude,
				longitude: currentMarker.value.longitude,
				name: currentMarker.value.title,
				address: currentMarker.value.address || '',
				scale: 18
			});
		}
	};

	const navigateToMyLocation = () => {
	// 将地图移动到用户当前位置
	locateToMyPosition();
};

	// 定位到我的位置
	const locateToMyPosition = () => {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				uni.showToast({
					title: '已定位到您的位置',
					icon: 'success'
				});
			},
			fail: (err) => {
				console.error('定位失败:', err);
				uni.showToast({
					title: '定位失败，请开启定位权限',
					icon: 'none'
				});
			}
		});
	};

	// 格式化销售额
	const formatSales = (sales) => {
		if (typeof sales !== 'number') {
			sales = Number(sales) || 0;
		}
		// 格式化为千分位显示
		return sales.toLocaleString('zh-CN');
	};
	
	// 格式化距离（米转千米并保留两位小数）
	const formatDistance = (distance) => {
		if (!distance || distance === '未知距离') {
			return '未知距离';
		}
		// 转换为数字
		const distanceNum = Number(distance);
		if (isNaN(distanceNum)) {
			return '未知距离';
		}
		// 转换为千米并保留两位小数
		const km = distanceNum / 1000;
		return km.toFixed(2) + ' km';
	};

	// 点击门店列表项
	const onShopListItemClick = (item) => {
		// 找到对应的标记点
		const marker = markers.value.find(m => m.id === item.id);
		if (marker) {
			// 移动地图到该门店
			latitude.value = marker.latitude;
			longitude.value = marker.longitude;
			// 显示气泡
			currentMarker.value = marker;
			showCallout.value = true;
		}
	};

	// 页面加载
	onMounted(() => {
		fetchShopData(); // 加载门店数据
	});

	// 气泡位置数据
	const calloutPosition = ref({
		left: '50%',
		top: '50%'
	});

	// 更新气泡位置
	const updateCalloutPosition = (marker) => {
		if (!marker || !showCallout.value) return;
		const mapContext = uni.createMapContext('myMap');
		mapContext.getRegion({ 
			success: (res) => {
				mapContext.fromLocationToMapPoint({
					latitude: marker.latitude,
					longitude: marker.longitude,
					success: (result) => {
						uni.createSelectorQuery().select('#myMap').boundingClientRect((rect) => {
							if (rect) {
								const centerX = rect.width / 2;
								const centerY = rect.height / 2;
								const mapCenterLat = (res.southwest.latitude + res.northeast.latitude) / 2;
								const mapCenterLng = (res.southwest.longitude + res.northeast.longitude) / 2;
								const latPerPixel = (res.northeast.latitude - res.southwest.latitude) / rect.height;
								const lngPerPixel = (res.northeast.longitude - res.southwest.longitude) / rect.width;
								const diffLat = marker.latitude - mapCenterLat;
								const diffLng = marker.longitude - mapCenterLng;
								let x = centerX + (diffLng / lngPerPixel);
								let y = centerY - (diffLat / latPerPixel);
								// 根据底部列表当前高度限制气泡底部边界
								// 底部列表固定高度，移除展开/收起逻辑
								// ... existing code ...

								// ... existing code ...
								// 计算气泡位置时使用固定底部高度
								const footerHeightPx = typeof uni.upx2px === 'function' ? uni.upx2px(footerHeightRpx) : (rect.width / 750 * footerHeightRpx);
								const bottomBoundary = rect.height - footerHeightPx - 8;
								if (y > bottomBoundary) {
								  y = bottomBoundary;
								}
								calloutPosition.value = {
								  left: `${x}px`,
								  top: `${y - 100}px` // 上调气泡位置
								};
							}
						}).exec();
					}
				});
			}
		});
	};

	// 处理地图区域变化
	const onRegionChange = (e) => {
		// 拖动/缩放地图开始时，收起底部列表恢复原高度
		if (e.type === 'begin') {
			// 保持固定底部高度
		}
		// 如果正在移动并且有气泡显示
		if (e.type === 'begin' && showCallout.value && currentMarker.value) {
			// 清除旧的定时器（如果存在）
			if (mapMoveInterval.value) {
				clearInterval(mapMoveInterval.value);
			}
			// 设置定时器，每16ms更新一次气泡位置（约60fps）
			mapMoveInterval.value = setInterval(() => {
				updateCalloutPosition(currentMarker.value);
			}, 16);
		}
		// 如果移动结束
		else if (e.type === 'end' && mapMoveInterval.value) {
			// 清除定时器
			clearInterval(mapMoveInterval.value);
			mapMoveInterval.value = null;
			// 最后再更新一次位置，确保精确
			if (showCallout.value && currentMarker.value) {
				updateCalloutPosition(currentMarker.value);
			}
		}
	};

	// 页面卸载时清理
	onUnmounted(() => {
		if (locationUpdateStarted) {
			uni.stopLocationUpdate();
			uni.offLocationChange();
		}
		if (hideTimeout.value) {
			clearTimeout(hideTimeout.value);
		}
		if (mapMoveInterval.value) {
			clearInterval(mapMoveInterval.value);
		}
	});</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	// 自定义气泡样式
	.custom-callout {
		position: absolute;
		z-index: 50; /* 降低层级，避免遮挡底部列表滚动 */
		transform: translateX(-50%);
	}


	.callout-content {
		min-width: 520rpx;
		max-width: 680rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		overflow: hidden;
		background: #ffffff;
	}

	.title {
		background: #00bd86;
		padding: 16rpx 20rpx;
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
	}

	.callout-Shop {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.descCont {
		padding: 16rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.desc {
		font-size: 24rpx;
		color: #333333;
		flex: 1;
		margin-right: 16rpx;
	}

	.dh-btn {
		color: #2F7BFF;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.callout-Dh {
		width: 22rpx;
		height: 22rpx;
		margin-right: 6rpx;
	}

	// 智能优化筛选框
	.shopMsgBox {
		position: absolute;
		top: 60rpx;
		left: 30rpx;
		right: 30rpx;
		background: #ffffff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.shopMsgBoxLeft {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #333333;
	}

	.shopMsgNum {
		font-size: 36rpx;
		font-weight: bold;
		color: #00bd86;
		margin-top: 4rpx;
	}

	.shopMsgBoxRight {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #5E606F;
	}

	.shopMsgBoxBotom {
		margin-left: 6rpx;
	}

	// 搜索类型选择弹窗
	.typeSelector {
		position: absolute;
		top: 120rpx; /* 更靠近顶部信息区域 */
		right: 30rpx; /* 靠右对齐 */
		left: auto;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
		z-index: 100;
		min-width: 180rpx;
		max-width: 280rpx;
		padding: 6rpx 0;
		border: 1rpx solid #f0f2f5;
	}

	.typeOption {
		z-index: 9000;
		padding: 18rpx 24rpx; /* 更小的点击区域 */
		font-size: 26rpx; /* 字号略小 */
		color: #333333;
		border-bottom: 1px solid #f5f6f8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1.4;
	}

	.typeOption:last-child {
		border-bottom: none;
	}

	.typeOption:active {
		background-color: #f7f9fc; /* 更清淡的按下色 */
	}

	/* 图标与文字贴合更紧凑 */
	.typeOption .u-icon {
		margin-left: 12rpx;
	}

	/* 已移除 selectorMask 相关样式，避免干扰 */

	// 地图按钮
	.mapBtnClick {
		position: absolute;
		bottom: 480rpx;
		right: 30rpx;
		z-index: 99;
	}

	.mapBtnClickLi {
		width: 90rpx;
		height: 90rpx;
		background: #ffffff;
		border-radius: 50%;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mapBtnClickLi image {
		width: 44rpx;
		height: 44rpx;
	}

	// 底部门店列表
	.footerShopList {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 460rpx; /* 从全屏改为更紧凑高度 */
		background: #ffffff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 20rpx;
		display: flex;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
		z-index: 98;
	}

	.footerImageList {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.footerImageList image {
		width: 100%;
		height: 100%;
	}

	.footerTitList {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.footerTitListTop {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		flex-shrink: 0;
	}
	
	.shopListScroll {
	  height: calc(100% - 110rpx); /* 扣除顶部标题占位 */
	  overflow: hidden; /* 由组件自身处理滚动 */
	}
	.footerTitListTop text {
		font-size: 36rpx;
		font-weight: bold;
		color: #00bd86;
	}

	.listLi {
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.listTag {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background: #ff6666;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
	}

	.listName {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 12rpx;
		margin-left: 0;
	}

	.listTag + .listName {
		margin-left: 60rpx;
	}

	.listAddress {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
	}

	.listAddress image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}

	.listAddressName {
		font-size: 22rpx;
		color: #999999;
		margin-left: 12rpx;
		flex: 1;
	}

	.listNumBox {
		display: flex;
		justify-content: space-between;
	}

	.listNumLi {
		flex: 1;
	}

	.listNum {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.listNum text {
		font-size: 32rpx;
		color: #00bd86;
	}

	.listNumText {
		font-size: 22rpx;
		color: #999999;
		margin-top: 4rpx;
	}

	.no-shop-data {
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999999;
	}

	.screenBox{
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		width: 200rpx;
		height: 56.41rpx;
		border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
		background: #ffffff;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #5E606F;
		 font-weight: 400;
		 font-size: 29.49rpx;
		 padding: 0 22rpx;
		 box-sizing: border-box;
		.screenDown{
			width: 20.51rpx;
			height: 20.51rpx;
			background: #f4f6f9;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 11rpx;
		}
	}
	
	.footerShop{
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 20rpx );
		left: 0;
		width: 100%;
		.footerImage{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;
			box-sizing: border-box;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.footerTit{
			width: 703.85rpx;
			height: 89.74rpx;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: linear-gradient(0deg, #ffffff,#fbe8d4);
			box-shadow: 0 5.77rpx 15.38rpx 0 #ffa92729;
			 color: #1c2027;
			 font-weight: 500;
			 font-size: 33.33rpx;
			 margin: 20rpx auto 0;
			 display: flex;
			 align-items: center;
			 padding: 0 25rpx;
			 box-sizing: border-box;
			text{
				color: #ff8636;
				 font-weight: 500;
				 font-size: 33.33rpx;
			}
		}
	}
	
	.footerShopList{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		.footerImageList{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;
			box-sizing: border-box;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.footerTitList{
			width: 100%;
			height: 100%;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: linear-gradient(0deg, #f2f3f5,#fff2e5);
			box-shadow: 0 0 13.46rpx 0 #095a8b30;
			padding: 36rpx 23rpx;
			box-sizing: border-box;
			.footerTitListTop{
				color: #1c2027;
				font-weight: 500;
				font-size: 33.33rpx;
				margin-bottom: 26rpx;
				text{
					color: #ff8636;
					 font-weight: 500;
					 font-size: 33.33rpx;
				}
			}
			.listLi{
				width: 100%;
				border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
				background: #ffffff;
				padding: 37rpx 26rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				position: relative;
				.listTag{
					position: absolute;
					width: 60rpx;
					height: 40rpx;
					background: url('/static/home/tagYz.png') no-repeat center;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					top: 22rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFBF7;
				}
				.listName{
					font-weight: 500;
					font-size: 32.05rpx;
					color: #1C2027;
				}
				.listAddress{
					display: flex;
					align-items: center;
					font-size: 25.64rpx;
					font-weight: 400;
					color: #1C2027;
					margin-top: 14rpx;
					image{
						width: 40.38rpx;
						height: 40.38rpx;
						margin-right: 12rpx;
					}
					.listAddressName{
						font-size: 25.64rpx;
						font-weight: 400;
						color: #7F8494;
						padding-left: 12rpx;
						box-sizing: border-box;
						margin-left: 12rpx;
						border-left: 1rpx solid #7F8494;
					}
				}
				.listNumBox{
						margin-top: 22rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 20rpx;
						.listNumLi{
							flex: 1;
							min-width: 0;
							border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
							background: #f4f6f9;
							padding: 25rpx 21rpx;
							box-sizing: border-box;
						.listNum{
							font-size: 26.92rpx;
							font-weight: 400;
							color: #FA8418;
							text{
								font-size: 38.46rpx;
								font-weight: 400;
							}
						}
						.listNumText{
							font-size: 23.08rpx;
							font-weight: 400;
							color: #7F8494;
						}
					}
				}
			}
		}
	}
</style>